﻿/**
 * Created by wzj on 2017/3/20.
 */

/**
 * 表格
 *
 * <BootstrapTable>
 * 		data={ products } 数据
 * 		bordered={false} 边框
 * 		striped 各行色
 * 		hover 鼠标停留色
 * 	 	height='120' 出滚动条 scrollTop={ 'Bottom' }滚动置底部 top/bottom/ 任一数字
 *
 * <TableHeaderColumn>
 *  	width='150'
 *  	dataField='id'
 *  	isKey
 *
 *  	dataAlign='center'	//数据单元格对齐方式
 *  	headerAlign='right'	//表头单元格对齐方式
 *
 *  	width='150'
 *  	hidden	//隐藏
 *
 *  	tdStyle={ { whiteSpace: 'normal' } }
 *
 *  	dataFormat={ priceFormatter } 数据格式化
 *  	function priceFormatter(cell, row) { return "";}
 *
 *
 *
 *
 *
 *
 */


/*--------------------------------------------------------------------------------------------*/
var typeArray = ['类型1','类型2','类型3','类型4'];
var products = [];
function addProducts() {
	const startId = products.length;
	for (var i = 0; i < 50; i++) {
		const id = startId + i;
		products.push({
			id: id,
			name: 'Item name ' + id,
			type:"类型-"+parseInt(Math.random()*typeArray.length-1),
			time: "2017-04-12 "+i+":00"
		});
	}
}
addProducts();
/*--------------------------------------------------------------------------------------------*/
//
class RTable extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.url = "http://localhost:8080/lqMemberTransactionFlow";
		this.urlData = props.urlData;
		this.products = products;
		this.state = {
			datas:[],
			totalSize: 0,
			sizePerPage: 5,
			page: 1,
			filter:{
				startTime:"",
				endTime:""
			}

		}


		//数据行选中配置
		this.selectRowProp  = {
			mode: 'radio',
			onSelect: this.onRowSelect,
			onSelectAll: this.onSelectAll
		}

		this.ajaxRequestData = this.ajaxRequestData.bind(this);
		this.handlePageChange = this.handlePageChange.bind(this);
		this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);

	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/

	ajaxRequestData(urlData, page = this.state.page, sizePerPage = this.state.sizePerPage) {

		const currentIndex = (page - 1) * sizePerPage;
//		this.setState({
//			datas: products.slice(currentIndex, currentIndex + sizePerPage),
//			totalSize: products.length,
//			page:page,
//			sizePerPage:sizePerPage
//		})


		//ajax加载数据
		$.ajax({
			url:this.url,
			data:urlData,
			type:'post',
			success:function(str,msg,response){
				if(response.statusText=="success"){
					var result = JSON.parse(response.responseText);
					this.products=str;
					this.setState({
						datas:result,
						totalSize: result.length,
						page:1,
						sizePerPage:sizePerPage
					});

				}
			}.bind(this),
			error:function(str,msg,response){

			}.bind(this)
		});
	}
	/*******************************************************************/

	//分页数量选项事件
	handleSizePerPageChange(sizePerPage){
		this.ajaxRequestData(1, sizePerPage);
	}

	//分页事件
	handlePageChange(page, sizePerPage){
		this.ajaxRequestData(page,sizePerPage);
	}

	/*******************************************************************/
	//选中行
	onRowSelect = (row, isSelected) =>{
		var rowArr = [];
		if(isSelected) {
			rowArr.push(row.id);
		}
	}
	onSelectAll = (isSelected, currentDisplayAndSelectedData) =>{

	}

	/*******************************************************************/
	//时间过滤查询
	handleTimeFilterClick = (evt) =>{
		alert("开始:"+$("#filter-starttime").val() + " 结束:" +$("#filter-endtime").val());
//		var rt=	new RTable();
		var dt= $("#filter-starttime").val();
		var ed=$("#filter-endtime").val();
		//重新查询数据
//		var props={url:"",data:""};
//		props.url="http://localhost:8080/lqMemberTransactionFlow";
//		props.data="&beginDate="+dt+"&endDate="+ed;
//        rt.constructor(props);
//		rt.componentDidMount();
//		this.ajaxRequestData();
		this.ajaxRequestData({beginDate:dt,endDate:ed});
	}

	/*******************************************************************/
	render() {

	//配置
	const tableOptions = {
		noDataText: '暂无可用数据',

		page: this.state.page,		//当前第几页
		sizePerPage: this.state.sizePerPage,	//每页显示几条
		onPageChange: this.handlePageChange,  //分页事件
		onSizePerPageList: this.handleSizePerPageChange, //分页下拉事件

		sizePerPageList: [
			{text: '5', value: 5},
			{text: '10', value: 10 },
			{text:'所有', value:this.products.length}
		],				//分页数量选项
		sizePerPage: this.state.sizePerPage,	//每页显示条数
		pageStartIndex: this.state.currentPage, //	分页开始索引
		paginationSize: 3,	//分页数字按钮个数
		prePage: '上一页',
		nextPage: '下一页',
		firstPage: '首页',
		lastPage: '尾页'
		,insertBtn: this.createCustomInsertButton		//自定义添加按钮
		,deleteBtn: this.createCustomDeleteButton		//自定义删除按钮
		,insertModalBody: this.createCustomModalBody	//自定义模态窗窗体
		,insertModalHeader: this.createCustomModalHeader	//自定义模态窗标题
		,onAddRow: this.onAddNewRow	//远程添加新数据
		,onDeleteRow: this.onDeleteRow	//远程删除数据
	}

		return (
			<div>
				<p>
					开始时间:<input type="text" id="filter-starttime"/>
				</p>
				<p>
					结束时间:<input type="text" id="filter-endtime"/>
				</p>
				<button onClick={ this.handleTimeFilterClick } className='btn btn-default'>查询</button>
				<BootstrapTable data={ this.state.datas }
								remote={true}
								striped hover
								fetchInfo={ { dataTotalSize: this.state.totalSize } }
								options={ tableOptions }
								pagination={ true }
								insertRow={false}
								deleteRow={ false }
								selectRow={ this.selectRowProp }
								>
				<TableHeaderColumn dataField='thirdLogNo'  isKey={ true } hiddenOnInsert={false}>thirdLogNo</TableHeaderColumn>
				<TableHeaderColumn dataField='frontLogNo'>frontLogNo</TableHeaderColumn>
				<TableHeaderColumn dataField='inCustAcctId' >inCustAcctId </TableHeaderColumn>
				<TableHeaderColumn dataField='inThirdCustId' >inThirdCustId </TableHeaderColumn>
				<TableHeaderColumn dataField='outCustAcctId' >outCustAcctId </TableHeaderColumn>
				<TableHeaderColumn dataField='outThirdCustId' >outThirdCustId </TableHeaderColumn>
				<TableHeaderColumn dataField='tranAmount' >tranAmount </TableHeaderColumn>
				<TableHeaderColumn dataField='tranFlag' >tranFlag </TableHeaderColumn>
				
				</BootstrapTable>
			</div>
		);
	}
}
var myRTable = ReactDOM.render(<RTable url="" />,document.getElementById("component-table"));



//自定义格式化表格内容
function customFormatterPrice(cell,row){
	return "$ "+cell;
}
//保存表单数据
function save_newItem(){
	//调用组件内保存方法并发送ajax请求
	myRTable.externalModalOnSave($("#item-form").serialize());
}
//显示外部模态窗体
function showExternalModalForm(){
	$("#modal-itemForm").modal("show");
}


function formdt(fmt) { 
    var o = { 
       "M+" : this.getMonth()+1,                 //月份 
       "d+" : this.getDate(),                    //日 
       "h+" : this.getHours(),                   //小时 
       "m+" : this.getMinutes(),                 //分 
       "s+" : this.getSeconds(),                 //秒 
       "q+" : Math.floor((this.getMonth()+3)/3), //季度 
       "S"  : this.getMilliseconds()             //毫秒 
   }; 
   if(/(y+)/.test(fmt)) {
           fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
   }
    for(var k in o) {
       if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
   return fmt; 
} 
var formatDate = function (date) {  
    var y = date.getFullYear();  
    var m = date.getMonth() + 1;  
    m = m < 10 ? '0' + m : m;  
    var d = date.getDate();  
    d = d < 10 ? ('0' + d) : d;  
    return y + m +  d;  
};  
